@import "mixins";
@import "base";

/* Demo css */

html {
  background: #222 url('../images/bg.png');
}

body {
  height: 100%;
  font-family: arial;
  font-size: 1em;
  line-height: 1.3em;
  padding: 30px 0;
}

a {
  color:#0d3a8b;
  text-decoration:none;

  &:hover {
    text-decoration: underline;
  }
}

hr { width: 50%; height:1px; background:#eee; border:0; margin:40px 25%; }

p { margin:0.6em 0; line-height: 1.2em; }

h1, h2, h3, h4, h5, h6 { margin: 0.3em 0 0.8em;  line-height: 1.1em; font-weight: bold; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }

ul {
  padding-left:20px;

  li { margin: 0.6em 0; list-style-type: disc; }
}

.collapsible { display:none; }

img.inline { margin: 10px; }
.box-shadow.rgba img.inline { @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }

.hasBorder { border: 4px solid #fff; }

.box-shadow.rgba .hasShadow {
  @include box-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.page,
.pageHeader {
  margin: 0 auto;
  width: 920px;
  background: #fafafa;
  padding: 30px;
  position: relative;
}

.pageHeader {
  background: #267be4;
  color: #fafafa;

  p a {
    color: #fff;
  }
}
.cssgradients .pageHeader {
  @include linear-gradient(#337edc, #0a5abf);
}
.borderradius .pageHeader {
  @include border-radius(8px 8px 0 0);
}

.options {
  th {
    background: #222;
    border: 1px solid #111;
    padding: 6px 10px;
    color: #eee;
    vertical-align: middle;
  }

  tr:nth-child(even) { background: #eee; }
  tr:nth-child(odd) { background: #fff; }

  td {
    border: 1px solid #ddd;
    padding: 6px 10px;
    vertical-align: middle;

    pre {
      background: transparent;
      border: 0;
    }
  }
}

.textbox {
  color: #444;
  width: 400px;
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #eee;

  .smallipopBlue {
    font-weight: bold;
    color: #44f;
  }
}

.sampleElement {
  border: 1px solid #fed980;
  padding: 3px 5px;
  background-color: #ffe199;
  font-size: 1.1em;
  text-shadow:0 1px 1px #fff24d;

  &.big {
    font-size: 1.4em;
  }

  &, a { text-decoration: none; cursor:pointer; }

  &:hover {
    background-color: #fff4d9;
    border-color: #ffd777;
    text-decoration: none;
  }

  &.white {
    background-color: #fff;
    border-color: #ddd;
    text-shadow:none;
  }
  &.green {
    background-color: #2ea41e;
    border-color: #239714;
    color: #fafafa;
    text-shadow: 0 1px 1px #196d0e;
  }
  &.black {
    background-color: #333;
    color: #eee;
    border-color: #000;
    text-shadow:none;
  }
  &.blue {
    background-color: #0064b4;
    color: #eee;
    border-color: #0064b4;
    text-shadow:none;
  }
  &.orange {
    background-color: #fbb913;
    color: #714900;
  }
  &.default {
    background-color: #586d82;
    color: #eee;
    border-color: #314b64;
    text-shadow:none;
  }
}
.borderradius .sampleElement { @include border-radius(6px); }
.cssgradients .sampleElement {
  @include linear-gradient(#fff24d, #f9aa18);

  &:hover { @include linear-gradient(#fff24d, #fdc661); }

  &.white {
    @include linear-gradient(#ffffff, #fafafa);
  }
  &.green {
    @include linear-gradient(#35b125, #29a219);
    &:hover {
      @include linear-gradient(#40bb30, #31aa21);
    }
  }
  &.black {
    @include linear-gradient(#444444, #111111);
  }
  &.blue {
    @include linear-gradient(#1279cb, #0064b4); color: #eee;
  }
  &.default {
    @include linear-gradient(#4f6c88, #314b64);
  }
}
.box-shadow.rgba .sampleElement {
  @include box-shadow(0 1px 4px rgba(255, 162, 0, 0.3));

  &.white,
  &.black,
  &.blue,
  &.green,
  &.default { @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.3)); }
}

/* Sidemenu */
.side-menu {
  position: fixed;
  top: 168px;
  left: 50%;
  margin-left: -(460 + 130 + 2 * 30px);
  padding-top: 30px;
  text-align: right;
  width: 140px;
  font-size: 14px;
  z-index: 9999;

  h2 {
    color: #267BE4;
    font-size: 16px;
  }

  ul {

  }

  li {
    list-style-type: none;
    a {
      color: #aaa;

      &:hover {
        color: #ccc;
        text-decoration: underline;
      }

      &.current {
        color: #eee;
      }
    }
  }
}

/* indicator */
.indicator {
  position: relative;
  display: block;
  width: 21px; height: 21px;
  font-size: 26px;
  font-weight: bold;
  line-height: 21px;
  text-align: center;
  color: #6fc048;
  background-color: #fff;
  opacity: 0.95;

  .indicatorPlus {
    width: 14px;
    margin: 0 3px;
    overflow:hidden;
  }
}
.cssgradients .indicator { @include linear-gradient(#ffffff, #fafafa); }
.borderradius .indicator { @include border-radius(2px); }

.smallipopArrow { width: 25px; height: 42px; }

/* wobbler */
.wobble {
  -webkit-animation: wobble 1s linear;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: bottom center;
  -moz-animation: wobble 1s linear;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: bottom center;
}

@-webkit-keyframes wobble {
  0%   { -webkit-transform: rotate(0deg); }
  5%   { -webkit-transform: rotate(10deg); }
  10%   { -webkit-transform: rotate(7.4deg); }
  15%   { -webkit-transform: rotate(-1.1deg); }
  20%   { -webkit-transform: rotate(-5.2deg); }
  25%   { -webkit-transform: rotate(-3deg); }
  30%   { -webkit-transform: rotate(1deg); }
  35%   { -webkit-transform: rotate(2.6deg); }
  40%   { -webkit-transform: rotate(1.2deg); }
  45%   { -webkit-transform: rotate(-0.72deg); }
  50%   { -webkit-transform: rotate(-1.2deg); }
  55%   { -webkit-transform: rotate(-0.44deg); }
  60%   { -webkit-transform: rotate(0.44deg); }
  65%   { -webkit-transform: rotate(0.57deg); }
  70%   { -webkit-transform: rotate(0.14deg); }
  75%   { -webkit-transform: rotate(-0.25deg); }
  80%   { -webkit-transform: rotate(-0.26deg); }
  85%   { -webkit-transform: rotate(-0.033deg); }
  90%   { -webkit-transform: rotate(0.13deg); }
  95%   { -webkit-transform: rotate(0.12deg); }
  100%   { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes wobble {
  0%   { -moz-transform: rotate(0deg); }
  5%   { -moz-transform: rotate(10deg); }
  10%   { -moz-transform: rotate(7.4deg); }
  15%   { -moz-transform: rotate(-1.1deg); }
  20%   { -moz-transform: rotate(-5.2deg); }
  25%   { -moz-transform: rotate(-3deg); }
  30%   { -moz-transform: rotate(1deg); }
  35%   { -moz-transform: rotate(2.6deg); }
  40%   { -moz-transform: rotate(1.2deg); }
  45%   { -moz-transform: rotate(-0.72deg); }
  50%   { -moz-transform: rotate(-1.2deg); }
  55%   { -moz-transform: rotate(-0.44deg); }
  60%   { -moz-transform: rotate(0.44deg); }
  65%   { -moz-transform: rotate(0.57deg); }
  70%   { -moz-transform: rotate(0.14deg); }
  75%   { -moz-transform: rotate(-0.25deg); }
  80%   { -moz-transform: rotate(-0.26deg); }
  85%   { -moz-transform: rotate(-0.033deg); }
  90%   { -moz-transform: rotate(0.13deg); }
  95%   { -moz-transform: rotate(0.12deg); }
  100%   { -moz-transform: rotate(0deg); }
}

/* pulser */
.pulser {
  height:12px; width:12px;
  position:absolute;
}
.pulser .inner {
  height:16px; width:16px;
  position:absolute;
  left:0px; top:0px;
  background:#fcfcfc;
  color:#1ec016;
  text-shadow:0 -1px 1px #ccc;
  font-size:16px;
  line-height:16px;
  font-weight:bold;
  text-align:center;
}
.cssgradients .pulser .inner {
  @include linear-gradient(#fafafa, #dddddd);
}
.borderradius .pulser {
  &,
  .outer,
  .inner { @include border-radius(30px); }
}
.cssanimations .pulser .outer {
  height: 12px; width: 12px;
  position: absolute;
  left:0; top:0;
  border: 2px solid #50b6f4;
  -webkit-animation: pulsate 1.2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: pulsate 1.2s ease-out;
  -moz-animation-iteration-count: infinite;
  opacity: 0.0;
}
@-webkit-keyframes pulsate {
  0% {-webkit-transform: scale(1, 1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-webkit-transform: scale(2, 2); opacity: 0.0;}
}
@-moz-keyframes pulsate {
  0% {-moz-transform: scale(1, 1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-moz-transform: scale(2, 2); opacity: 0.0;}
}


/* Tabs */
.pageHeader .tabs {
  margin: 0 -30px;
  width: 933px;
  padding: 0 10px 0 37px;
}
